<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增岗位')}" />
</head>
<style>
    .history{
        padding: 14px;
    }
    .history h5{
        display: block;
        width: 100%;
        padding: 8px;
        box-sizing: border-box;
    }
    .history .ibox .ibox-content{
        padding: 13px;
        border: 1px solid #eaeaea;
        font-size: 14px;
        cursor: pointer;
    }
    .history .ibox .ibox-content:hover{
        border-color: coral;
    }
    .bank-color{
        border: 1px solid coral;
    }
</style>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <div class="row form-header" style="border-bottom: 1px solid #e9e9e9;padding-left: 15px">
        <div class="col-sm-10">
            <h5>可提现余额: <span class="text-red" th:text="'￥'+${userAccount.backAmount/100}+' 元'"></span></h5>
        </div>
        <div  class="col-sm-2">
            <a href="javascript:void(0)" th:onclick="$('#drawMoney').val('[[${userAccount.backAmount-(userAccount.backAmount%10000)}/100]]')" class="btn btn-primary btn-xs">全部提现</a>
        </div>
    </div>
    <br>
    <form class="form-horizontal m" id="form-account-add">
        <div class="form-group row">
            <label class="col-sm-3 col-form-label text-sm-right">提取金额</label>
            <div class="col-sm-2">
                <input class="form-control" type="text" id="drawMoney" name="drawMoney" placeholder="提取金额" required>
            </div>
            <div class="form-text text-red">
                提取金额必须是100的倍数，最低提现100元
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label text-sm-right">收款人</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="bankCardName" name="bankCardName" placeholder="请输入银行卡开户人姓名" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label text-sm-right">银行卡号</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="bankCardNumber" name="bankCardNumber" placeholder="请输入银行卡号" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-3 col-form-label text-sm-right">开户银行</label>
            <div class="col-sm-6">
                <input class="form-control" type="text" id="bankName" name="bankName" placeholder="请输入开户银行" required>
            </div>
        </div>

        <div class="row history" th:if="${bankCardList.size() gt 0}">
            <h5 class="">历史卡号</h5>
            <div class="col-sm-4 " th:each="bankCard : ${bankCardList}">
                <div class="ibox" th:id="'bank-'+${bankCard.id}">
                    <div class="ibox-content" th:onclick="selectBanks([[${bankCard.id}]])">
                        <div th:text="'收款人：'+${bankCard.bankCardName}"></div>
                        <div th:text="'银行：'+${bankCard.bankName}"></div>
                        <div th:text="'卡号：'+${bankCard.bankCardNumber}"></div>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<script type="text/javascript">
    function selectBanks(id) {
        $.post("/my/account/bank.json",{"id":id},function (json) {
            if(json.code === 0){
                $(".ibox").removeClass("bank-color")
                $("#bank-"+id).addClass("bank-color");
                $("#bankName").val(json.data.bankName)
                $("#bankCardNumber").val(json.data.bankCardNumber)
                $("#bankCardName").val(json.data.bankCardName)
            }else {
                $.modal.msgError(json.msg);
            }

        })
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.modal.confirm("确定要执行提现操作吗？", function () {
                $.post("/my/account/take.json", $('#form-account-add').serialize(), function (json) {
                    if (json.code === 0) {
                        $.modal.msgSuccess(json.msg);
                        $.modal.closeLoading();
                        parent.layer.closeAll();
                        parent.location.reload();
                    } else {
                        $.modal.msgError(json.msg);
                    }
                })
            });
        }
    }


</script>
</body>
</html>
